<template>
  <div class="p-4">
    <span>{{ model }}</span>
    <BoForm ref="formRef" :model="model" :tabs="columns"> </BoForm>
    <Button @click="onValidate">click me</Button>
  </div>
  <!-- <FormModal :columns="columns"></FormModal> -->
</template>

<script lang="tsx" setup>
import { BoForm, BoFormProps } from '@/Form';
import { computed, ref, useTemplateRef } from 'vue';
import { Button, Flex } from 'ant-design-vue';
import { useFormModal } from '@boeyo/hooks';
const model: BoFormProps['model'] = ref({
  a: 1,
  b: 2,
  c: '',
  editor: 'xxxxxxxxxxxxxxxxxxxxx',
});
// const { FormModal, open } = useFormModal({
//   size: 'small',
//   column: 1,
// });

const formRef = useTemplateRef('formRef');
const onValidate = async () => {
  // open({
  //   title: '',
  //   modalType: 'disabled',
  //   request: () => {},
  //   defaultValue: model,
  // });
  const result = await formRef.value?.validate();
  console.log(result);
};

const columns = computed<BoFormProps['columns']>(() => {
  return [
    {
      tab: '测试',
      key: 'test',
      columns: [
        {
          title: '测试1',
          dataIndex: 'a',
          valueType: 'input',
          formItemProps: {
            rules: [{ required: true, message: '请输入' }],
          },
        },
        {
          title: '测试2',
          dataIndex: 'b',
          valueType: 'select',
          fieldProps(state) {
            return {
              placeholder: '请选择',
              options: [
                {
                  label: 'label1',
                  value: 1,
                },
                {
                  label: 'label2',
                  value: 2,
                },
              ],
            };
          },
        },
        {
          title: '测试3',
          dataIndex: 'c',
          valueType: 'input',
          fieldProps(state) {
            return state.b === 1
              ? {
                  placeholder: '请输入',
                }
              : { placeholder: '请选择' };
          },
        },
        {
          title: '',
          dataIndex: 'submit',
          valueType: 'input',
          render() {
            return (
              <Flex>
                <Button type='primary' htmlType='submit'>
                  提交
                </Button>
                <Button>取消</Button>
              </Flex>
            );
          },
        },
        {
          title: '富文本',
          dataIndex: 'editor',
          valueType: 'editor',
        },
        {
          title: '上传图片',
          dataIndex: 'images',
          valueType: 'image',
          fieldProps: {
            request(data, config) {},
            maxCount: 1,
          },
        },
      ],
    },
    {
      tab: '测试',
      key: 'test1',
      columns: [
        {
          title: '测试1',
          dataIndex: 'a11',
          valueType: 'input',
          formItemProps: {
            rules: [{ required: true, message: '请输入' }],
          },
        },
      ],
    },
  ];
});
</script>
